<template>
	<div>
    <div style="font-size: 0.2rem" v-if="load">
			<div v-if='fore.length>0' class="lencontent">
				<div class="con" @click="x(item)" v-for="(item,index) in fore">
					<p class="top">
						<span>开始时间 {{item.begin_time}}</span>
						<span class="a" v-if="item.live_status==2||item.live_status=='2'">正在直播</span>
						<span class="a" v-else-if="item.live_status==3||item.live_status=='3'" style="color: #ccc;">直播结束</span>
						<span v-else>
							<span class="a1" v-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'">免费</span>
							<span class="a" v-else>￥{{item.price}}</span>
						</span>

					</p>
					<div class="bto">
						<img class="btopic" :src="img+item.thumb" alt="">
						<div class="s">
							<p>{{item.name}}</p>
							<p v-if="item.tname">主讲人：{{item.tname}}</p>
							<p v-if="item.tname" class="honortap">{{item.honor}}</p>
							<p class="salesname" v-else>
								<img src="../../../src/assets/img/colorren.png" alt="">
								<span>{{item.sales}}人已加入</span>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div v-else class="chen-kongbai">
				<div class="chen-kongpic">
					<img src="../../../src/assets/img/kongbai.png" mode=""></img>
				</div>
				<div class="chen-kong-text"><span>暂时没有找到您所</span><span>需要的内容…</span></div>
			</div>
    </div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
	</div>
</template>

<script>
    export default {
      name: "Allforecast",
      data(){
          return{
			load:false,
            selected:'tab1',
            fore:[],
            img:this.$store.state.img
          }
      },
      methods:{
          x(item){
            var type = item.type;
            var id = item.id;
            if(type==1||type=='1'){
            	this.$router.push({
            		path:'/course',
            		query:{
            			cid:id
            		}
            	})
            }else if(type==2||type=='2'){
            	this.$router.push({
            		path:'/specialtopic',
            		query:{
            		 stid:id
            		}
            	})
            }else if(type==3||type=='3'){
            	this.$router.push({
            		path:'/class',
            		query:{
            		 bid:id
            		}
            	})
            }
          }
      },
      mounted(){
		  this.sdk.getJSSDK('','',this.$store.state.url);	
		var url = this.$store.state.url;				
		//获取预告
		this.axios.get(url + "Live/liveNotice").then(res=>{
		  // console.log(res);
			var data = res.data;
			if(data.errcode==0||data.errcode=='0'){
				var fore = data.data;
				if(fore.length>0){
			  this.fore = fore;
				}else{
					this.fore=[];
				}
			}else{
				this.fore=[];
			}
			this.load=true;
		})
      }
    }
</script>

<style scoped>
	.lencontent{
		padding-bottom: .5rem;
	}
	.honortap{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.salesname img{
		width: .32rem;
		height: .32rem;
	}
	.salesname span{
		color:#C2C9D3;
		font-size: .24rem;
		display: inline-block;
		/* margin-left: .1rem; */
	}
    .con{
      width: 92%;
      height: 2.25rem;
      box-shadow:0 0 0.1rem 0 rgba(71,68,80,0.1);
      border-radius:0.1rem;
      margin: auto;
      margin-top: 0.3rem;
    }
    .top{
      width: 6.9rem;
      height: 0.66rem;
      border-bottom: 0.01rem solid rgba(237,237,237,1);
      display: table-cell;
      vertical-align: middle;
    }
  .top span{
    font-size:0.28rem;

    line-height:0.32rem;
  }
  /* .top span:nth-child(1){
    margin-left: 0.2rem;
    color:rgba(51,51,51,1);
  } */
  .a{
    color:rgba(255,2,20,1);
    float: right;
    margin-right: 0.2rem;
  }
  .a1{
    color:#0287FF;
    float: right;
    margin-right: 0.2rem;
  }
  .bto{
    width: 100%;
    margin-top: 0.2rem;
  }
  .bto .btopic{
    width: 2.1rem;
    height: 1.18rem;
    float: left;
    border-radius:0.08rem;
  }
  .s{
    height: 1.18rem;
    margin-left: 2.3rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .s p{
    font-size: 0.24rem;
    width: 100%;
  }
  .s p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
</style>
